let userClose = document.querySelector('.userClose')
let userIn = document.querySelector('.icon input')
let pwdClose = document.querySelector('.pwdClose')
let pwdIn = document.querySelector('.icon2 input')

userIn.addEventListener('input',function(){
    if(userIn.value.length>0){
        userClose.style.display = 'block'
    }else{
        userClose.style.display = 'none'
    }
})

pwdIn.addEventListener('input',function(){
    if(pwdIn.value.length>0){
        pwdClose.style.display = 'block'
    }else{
        pwdClose.style.display = 'none'
    }
})

userClose.addEventListener('click',function(){
    userIn.value = ''
    userClose.style.display = 'none'
    one.textContent = ''
})

pwdClose.addEventListener('click',function(){
    pwdIn.value = ''
    pwdClose.style.display = 'none'
    two.textContent = ''
})
let user = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
let pwd = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/
let btn = document.querySelector('.btn button')
let one = document.querySelector('.one')
let two = document.querySelector('.two')

userIn.addEventListener('blur',function(){
    if(!user.test(userIn.value)){
        one.textContent= '用户名不正确'
    }else{
        one.textContent= ''
    }
})

pwdIn.addEventListener('blur',function(){
    if(!pwd.test(pwdIn.value)){
        two.textContent = '密码不正确'
    }else{
        two.textContent = ''
    }
})
let time = 3
btn.addEventListener('click',function(){
 
    if(!user.test(userIn.value)){
        one.textContent= '用户名不正确'
    }else if(!pwd.test(pwdIn.value)){
        two.textContent = '密码不正确'
    }else{
        btn.textContent = `登录成功${time}秒后跳转`
        setInterval(function(){
            
            if(time==1){
                time=1
            }else{
                time--
                btn.textContent = `登录成功${time}秒后跳转`
            }
        }, 1000);
        setTimeout(function(){
            location.href = '../page/home.html'
        },3000);
    }
})


let userLog = document.querySelector('#userLog')
let saoMa = document.querySelector('#saoMa')
let userOn = document.querySelector('.userOn')
let saoOn = document.querySelector('.saoOn')

userLog.addEventListener('click',function(){
    userLog.classList.add('model-active')
    saoMa.classList.remove('model-active')
    userOn.style.display = 'block'
    saoOn.style.display = 'none'
})

saoMa.addEventListener('click',function(){
    userLog.classList.remove('model-active')
    saoMa.classList.add('model-active')
    userOn.style.display = 'none'
    saoOn.style.display = 'block'
})